<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>懒加载组件化</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    ul,
    li {
      list-style: none;
    }

    .container {
      margin: 0 auto;
      max-width: 800px;
    }

    .container:after {
      content: '';
      display: block;
      clear: both;
    }

    .container li {
      float: left;
      margin: 10px;
    }

    .container li img {
      width: 350px;
      height: 280px;
    }

    p {
      float: left;
    }
  </style>
</head>
<body>
<ul class="container">
  <li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/1.jpg"/></a></li>
  <li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/2.jpg"/></a></li>
  <li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/3.jpg"/></a></li>
  <li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/4.jpg"/></a></li>
  <li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/5.jpg"/></a></li>
  <li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/6.jpg"/></a></li>
  <li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/7.jpg"/></a></li>
  <li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/8.jpg"/></a></li>
  <li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/9.jpg"/></a></li>
  <li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/10.jpg"/></a></li>
  <li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/11.jpg"/></a></li>
  <li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg"/></a></li>
  <li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/13.jpg"/></a></li>
  <li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/14.jpg"/></a></li>
  <li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/15.jpg"/></a></li>
  <li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/16.jpg"/></a></li>
  <li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/17.jpg"/></a></li>
  <li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/18.jpg"/></a></li>
  <li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/19.jpg"/></a></li>
  <li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/20.jpg"/></a></li>
</ul>
<p id="hello">hello</p>
<p id="world">world</p>
<script src="../js/jquery.js"></script>
<script>
  var Lazy = (function () {
    function _Exposure($target, callback) {
      this.$target = $target;
      this.callback = callback;
      this.bind();
      this.check();
    }

    function _ExposureOnce($target, callback) {
      this.$target = $target;
      this.callback = callback;
      this.bindImg();
      this.checkImg();
    }

    _Exposure.prototype.bind = function () {
      var _this = this;
      $(window).on('scroll', function () {
        _this.check();
      })
    }
    _ExposureOnce.prototype.bindImg = function () {
      var _this = this;
      $(window).on('scroll', function () {
        _this.checkImg();
      })
    }
    _Exposure.prototype.check = function () {
      if (this.isShow(this.$target)) {
        this.callback(this.$target);
      }
    }
    _ExposureOnce.prototype.checkImg = function () {
      if (this.$target.attr("src") === this.$target.attr("data-src")) {
        return;
      }
      if (this.isShow(this.$target)) {
        this.callback(this.$target);
      }
    }
    _Exposure.prototype.isShow = _ExposureOnce.prototype.isShow = function () {
      var windowHeight = $(window).height(),
          scrollTop = $(window).scrollTop(),
          offsetTop = this.$target.offset().top,
          nodeHeight = this.$target.height();
      if (windowHeight + scrollTop > offsetTop && offsetTop + nodeHeight > scrollTop) {
        return true;
      } else {
        return false;
      }
    }
    return {
      init: function ($targets, callback) {
        $targets.each(function (index, target) {
          new _Exposure($(target), callback);
        })
      },
      once: function ($targets, callback) {
        $targets.each(function (index, target) {
          new _ExposureOnce($(target), callback)
        })
      }
    }
  })();
  //文本曝光
  Lazy.init($('#hello'), function ($node) {
    $node.text($node.text() + '123');
  });
  Lazy.init($('#world'), function ($node) {
    $node.text($node.text() + '456');
  });
  //图片曝光
  Lazy.once($('.container img'), function ($node) {
    var url = $node.attr('data-src');
    $node.attr("src", url);
  });
</script>
</body>
</html>